<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>精准询价</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/style_zj.css">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../fonts/iconfont.css">
    <link rel="stylesheet" href="../css/select2.css">
    <style>
        .select2-container--default .select2-selection--single .select2-selection__arrow{
            height: 38px;
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered{
            line-height: 38px;
        }
        .select2-container .select2-selection--single{
            height: 38px;
            border-color: #D2D2D2!important;
            border-radius: 2px;
        }
    </style>
</head>
<body>
<!--<div id="header_01_html">
    <iframe id="header_01" src="head_01.html" frameborder="0"></iframe>
</div>-->
<div class="content-box">
    <!--<div id="left_tab_html">
        <iframe id="left_tab" src="left_tab.html?x=3&y=6" frameborder="0"></iframe>
    </div>-->
    <div class="right-box layui-form quali_honor" id="vue-box">
        <div class="content-admin">

            <div class="title-toggle">
                <div class="item active js-promit">申请品牌授权</div>
                <div class="item js-promit"><a href="look_apply_brand.html">品牌授权情况</a></div>
            </div>
            <div class="inquire-input-c">
                <div class="item">
                    <div>
                        <div class="input-box1">
                            <!--<div class="li clearfix">-->
                                <!--<div class="left-k"><span class="col-ff4"></span><span class="text-sty1">选择需授权产品</span></div>-->
                            <!--</div>-->
                            <!--<div class="li clearfix">-->
                                <!--<div class="layui-form input-v mr-20" style="margin-left: 0;width: 300px">-->
                                    <!--<select name="city" lay-verify="">-->
                                        <!--<option value="">请选择所需授权产品</option>-->
                                    <!--</select>-->
                                <!--</div>-->
                            <!--</div>-->
                            <div class="li clearfix">
                                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">选择授权品牌</span></div>
                            </div>
                            <div class="li clearfix">
                                <div class="box-select2 input-v mr-20" style="margin-left: 0;">
                                    <select name="" id="brandBox" style="width: 300px">
                                        <option value="">请选择授权品牌</option>
                                    </select>
                                </div>


                            </div>
                            <div class="li clearfix">
                                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">动态配图</span></div>
                            </div>
                            <div class="li clearfix">
                                <div class="file-img">
                                    <div class="box-file">
                                        <img src="../img/file1.png" alt="" class="upload_btn">
                                    </div>
                                </div>
                            </div>
                            <div class="li clearfix">
                                <div class="left-k"><span class="col-ff4"></span><span class="text-sty1">填写授权文字</span></div>
                                <div class="right-v">

                                </div>
                            </div>
                            <div class="li clearfix">
                                <div class="right-v wid-820">
                                    <textarea class="js-describe" placeholder="请填写授权描述信息" name="" id="" cols="30" rows="10"></textarea>
                                </div>
                            </div>
                            <div class="">
                                <span class="release-btn1 js-add">提交授权申请</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--<div>
    <iframe src="footer-record.html" style="width: 100%;border: none;height:60px;"></iframe>
</div>-->
<script src="../js/config.js"></script>
<script src="../js/select2.full.js"></script>
<script>

    var app = new Vue({
        el: '#vue-box',
        data: {

        },
        mounted:function(){
            var that = this;
            get_ajax("/sys/origin/getAllNewPage", {}, function (data) {
                that.brandList = data;
                data.forEach(function (item) {
                    item.text = item.name;
                })
                $("#brandBox").select2({
                    data: data,
                    placeholder: '请选择',
                    allowClear: true
                })
            })
        },
        updated:function () {

        },
        methods:{

        }
    });


    //图片上传
    layui.use(['upload'], function () {
        var $ = layui.jquery, upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '.upload_btn'
            ,multiple:true
            , url: baseUrl + '/file/upload?token=' + Token
            , before: function (obj) {
                loading = layer.load(1, {
                    shade: [0.1, '#fff'] //0.1透明度的白色背景
                });
            }
            , done: function (res, index) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg.msg('上传失败');
                } else {
                    var data = res.data;
//                    var str = '<div class="upload_img" picUrl="' + data.address + '" picId="' + data.id + '">' +
//                        '<i class="icon_delete"></i><img src="' + imgBaseUrl + data.address
//                        + '" alt=""></div>'
//                    this.item.parents(".file").after(str);
                    var el ='<div class="box-file" data-picUrl="'+data.address+'">'
                        +'<span class="del-png icon_close"></span>'
                        +'<img src="'+imgBaseUrl+data.address+'" alt="" class="upload_btn">'
                        +'</div>'
                    $('.file-img').append(el);
                    layer.close(loading);
                    console.log('上传成功！')
                }

            }
            , error: function () {

            }
        });
    })
    //    del-png
    $(document).on('click','.del-png',function(){
        $(this).parents('.box-file').remove();
    })

    $('.js-add').on('click',function(){  //新增
        var pngStr = '';
        $('.box-file').each(function(index){
            if(index>0){
                pngStr += $(this).attr('data-picurl')+','
            }
        })
        var picUrl = pngStr.slice(0,pngStr.length-1);
        if(!$('#brandBox').val()){
            layer.msg('请选择授权品牌！')
            return false;
        }
        if(!picUrl){
            layer.msg('请添加动态配图！')
            return false;
        }
        if(!$('.js-describe').val()){
            layer.msg('请填写授权文字！')
            return false;
        }
        get_ajax("/originAuthorization/add", {describe:$('.js-describe').val(),imgUrl:picUrl,originId:$('#brandBox').val()}, function (data) {
            layer.msg('申请成功！');
        })

    })


</script>
</body>
</html>